<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">订单核销码</view>

		<!-- 核销码输入区域 -->
		<view class="code-input-area">
			<input type="text" placeholder="输入订单核销码" v-model="verificationCode" class="code-input" />
			<button class="add-btn" @click="addCode">添加</button>
		</view>

		<!-- 扫一扫按钮 -->
		<button class="scan-btn" @click="scanCode">扫一扫</button>

		<!-- 领取商品区域 -->
		<view class="goods-area">
			<view class="goods-header">
				<text class="goods-title">领取商品</text>
				<button class="clear-btn" @click="clearGoods">清空</button>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="goods-item" v-for="(goods, index) in goodsList" :key="index">
					<view class="goods-info">
						<view class="goods-img">
							<!-- 商品图片占位 -->
							<view class="img-placeholder"></view>
						</view>
						<view class="goods-details">
							<text class="goods-name">{{ goods.name }}</text>
							<text class="goods-price">¥{{ goods.price.toFixed(2) }}</text>
						</view>
					</view>

					<!-- 核销数量 -->
					<view class="quantity-display">
						<text class="quantity-value">{{ goods.quantity }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 合计与确认区域 -->
		<view class="footer">
			<view class="total">
				<text class="total-text">合计: </text>
				<text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
			</view>
			<button class="confirm-btn" @click="confirmVerification">确认核销</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				verificationCode: '',
				goodsList: [{
						name: '娃哈哈矿泉水',
						price: 2.00,
						quantity: 1
					},
					{
						name: '可口可乐',
						price: 2.00,
						quantity: 1
					}
				]
			};
		},
		computed: {
			// 计算总价
			totalPrice() {
				return this.goodsList.reduce((total, goods) => {
					return total + goods.price * goods.quantity;
				}, 0);
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.goodsWriteOff')
			});
		},
		methods: {
			// 添加核销码
			addCode() {
				if (this.verificationCode.trim()) {
					uni.showToast({
						title: '核销码已添加',
						icon: 'success',
						duration: 2000
					});
					// 可以在这里添加核销码的处理逻辑
					this.verificationCode = '';
				} else {
					uni.showToast({
						title: '请输入核销码',
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 扫码功能
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果：', res.result);
						this.verificationCode = res.result;
						uni.showToast({
							title: '扫码成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: (err) => {
						console.log('扫码失败：', err);
						uni.showToast({
							title: '扫码失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},



			// 清空商品
			clearGoods() {
				uni.showModal({
					title: '提示',
					content: '确定要清空所有商品吗？',
					success: (res) => {
						if (res.confirm) {
							this.goodsList = [];
						}
					}
				});
			},

			// 确认核销
			confirmVerification() {
				if (this.goodsList.length === 0) {
					uni.showToast({
						title: '请添加商品',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				uni.showLoading({
					title: '核销中...'
				});

				// 模拟核销过程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '核销成功',
						icon: 'success',
						duration: 2000
					});
					// 核销成功后可以重置页面
					this.goodsList = [];
					this.verificationCode = '';
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0;
		text-align: center;
	}

	.code-input-area {
		display: flex;
		margin-bottom: 30rpx;
		gap: 20rpx;
	}

	.code-input {
		flex: 1;
		height: 80rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 20rpx;
		border: 1px solid #eee;
		font-size: 28rpx;
	}

	.add-btn {
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scan-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #ff3b30;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.goods-area {
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		flex: 1;
	}

	.goods-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.goods-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.clear-btn {
		color: #ff3b30;
		font-size: 26rpx;
		background-color: transparent;
		padding: 0;
		height: auto;
		line-height: normal;
	}

	.goods-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.goods-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.goods-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.goods-img {
		width: 100rpx;
		height: 100rpx;
	}

	.img-placeholder {
		width: 100%;
		height: 100%;
		background-color: #e5e9f2;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #888;
	}

	.goods-details {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333;
	}

	.goods-price {
		font-size: 26rpx;
		color: #ff3b30;
	}

	.quantity-display {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 15rpx;
		background-color: #f0f7ff;
		border-radius: 8rpx;
	}

	.quantity-label {
		font-size: 26rpx;
		color: #666;
	}

	.quantity-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #1677ff;
		min-width: 30rpx;
		text-align: center;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1px solid #eee;
		margin-top: auto;
	}

	.total {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.total-text {
		font-size: 28rpx;
		color: #666;
	}

	.total-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff3b30;
	}

	.confirm-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ff3b30;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
	}
</style>